<template>
  <div class="section">
    <h2>社交媒体与生活质量的相关性</h2>
    <div class="chart-container">
      <div id="correlationHeatmapChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "CorrelationHeatmap",
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 相关性矩阵数据 (假设已计算相关性)
      const data = [
        [1.0, -0.94, -0.76, 0.93, 0.83],
        [-0.95, 1.0, 0.71, -0.89, -0.8],
        [-0.76, 0.71, 1.0, -0.68, -0.79],
        [0.93, -0.89, -0.68, 1.0, 0.8],
        [0.83, -0.8, -0.79, 0.8, 1.0],
      ];

      const correlationLabels = [
        "平均每日使用时长",
        "每晚睡眠时长",
        "心理健康分数",
        "社交媒体冲突",
        "上瘾分数",
      ];

      const chart = echarts.init(
        document.getElementById("correlationHeatmapChart")
      );

      chart.setOption({
        title: {
          text: "社交媒体与生活质量相关性热图",
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            return `${correlationLabels[params.data[0]]} 与 ${
              correlationLabels[params.data[1]]
            }: ${params.data[2]}`;
          },
        },
        grid: {
          left: "20%",
          right: "10%",
          top: "10%",
          bottom: "10%",
        },
        xAxis: {
          type: "category",
          data: correlationLabels,
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "category",
          data: correlationLabels,
          axisLabel: {
            interval: 0,
          },
        },
        visualMap: {
          min: -1,
          max: 1,
          calculable: true,
          inRange: {
            color: ["#e0f7fa", "#80deea", "#26c6da", "#00bcd4", "#00838f"],
          },
          show: true,
        },
        series: [
          {
            name: "Correlation Matrix",
            type: "heatmap",
            data: this.generateHeatmapData(data),
            label: {
              show: true,
              color: "#fff",
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                borderColor: "#000",
                borderWidth: 2,
              },
            },
          },
        ],
      });
    },
    generateHeatmapData(data) {
      const result = [];
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].length; j++) {
          result.push([i, j, data[i][j]]);
        }
      }
      return result;
    },
  },
};
</script>

<style scoped>
.section {
  background: white;
  border-radius: 35px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-left: 15px;
  margin-right: 15px;
}

.section h2 {
  color: #4a90e2;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}

.chart-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

.chart {
  height: 400px;
  border-radius: 10px;
  padding: 15px;
  background: white;
}
</style>
